<template>

  <van-nav-bar
      title="云端管理"
      fixed
  />
  <div class="main">
    <van-cell-group>
      <template v-for="item in list">
        <van-cell :title="item.Nickname" :value="item.DeviceStatus" :label="item.DeviceName" @click="showAction(item)">
          <template #value>
            <div style="display: flex;align-items: center;height: 100%">
              <div :class="{'status-bar':true,active:item.DeviceStatus!=='DISABLE'}"></div>
              <span style="margin-left: 5px">{{ item.DeviceStatus === 'DISABLE' ? '已禁用' : '已启用' }}</span>
            </div>

          </template>

        </van-cell>
      </template>
    </van-cell-group>
    <van-empty v-if="!list.length" description="暂无设备"/>

    <van-action-sheet
        v-model:show="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @cancel="show=false"
    />
    <van-dialog v-model:show="dialogShow" title="修改设备信息" :show-confirm-button="false" >
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
              v-model="form.DeviceName"
              name="DeviceName"
              label="设备名称"
              placeholder="支持英文字母、数字"
              :rules="[{ required: true, message: '请填写用设备名称' },{message:'仅支持英文字母、数字',validator:validator},{message:'至少4个字符长度',validator:min}]"
          />
          <van-field
              v-model="form.Nickname"
              name="Nickname"
              label="备注"
              placeholder="备注"
              :rules="[{ required: true, message: '请填写备注' },{message:'至少4个字符长度',validator:min}]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
          <van-button round block style="margin-top: 20px;" @click="dialogShow=false" >
            取消
          </van-button>
        </div>
      </van-form>
    </van-dialog>
    <div style="padding:20px">
      <van-button icon="circle" block type="primary" style="margin-top: 60px;margin-bottom: 20px" @click="getList">刷新</van-button>
      <van-button icon="plus" block type="primary" style="margin-top: 20px;margin-bottom: 20px" @click="add">添加设备
      </van-button>
    </div>

  </div>
</template>
<script setup>
import {onBeforeUnmount, onMounted, ref,reactive } from "vue";
import {iotDel, iotList,iotEdit,iotSwitch} from "@/api";
import {showConfirmDialog, showToast} from "vant";
import {useRouter} from "vue-router";

const dialogShow =ref(false)
const router = useRouter()
const list = ref([])
const show = ref(false)
const getList = ()=>{
  iotList().then(res => {
    list.value = res
  })
}
onMounted(() => {
  getList()
})
const actions = ref([
  {
    name: '删除', color: '#ee0a24', callback() {
      showConfirmDialog({
        title: `确定要删除设备：${target.value.Nickname}`
      }).then(_ => {
        iotDel(target.value).then(res => {
          setTimeout(()=>{
            getList()
          },1000)
        })
      })
    }
  },
  {
    name: '启用/禁用', callback() {
      showConfirmDialog({
        title: `确定要${target.value.DeviceStatus!=='DISABLE' ?'禁用':'启用'}设备：${target.value.Nickname}`
      }).then(_ => {
        iotSwitch(target.value).then(res => {
          setTimeout(()=>{
            getList()
          },1000)
        })
      })
    }
  },
  {
    name: '修改设备信息', callback() {
      dialogShow.value=true
      form.DeviceName = target.value.DeviceName
      form.Nickname = target.value.Nickname
    }
  },
])
const target = ref()
const showAction = (item) => {
  target.value = item
  show.value = true
}
const timer = setInterval(()=>{
  getList()
},3000)

onBeforeUnmount(()=>{
  clearInterval(timer)
})


const validator = (val) => {
  return /^[a-zA-Z0-9]+$/.test(val)
}
const form = reactive({
  DeviceName: '',
  Nickname: '',
})

const onSubmit = (value) => {
  iotEdit({...target.value,...value}).then(res => {
    showToast({
      message: res.message,
      duration:1000,
    })
    if (res.code === 200) {
      dialogShow.value=false
      getList()
    }
  })
}
const min = (v)=>{
  return v.length >=4
}
const add = () => {
  router.push('/add')
}
</script>
<style scoped>
.main {
  padding-top: 60px;
}

.status-bar {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #888;
  margin-left: auto;

  &.active {
    background: #07c160;
  }
}
</style>